<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style type="text/css">
    #demo {
        background: #ff9900;
        background: url('../image/demo1.png') no-repeat;
        background-position: center;
        background-size: 100%;
        height: 200px;
    }
</style>
<body>
    <div class="aui-content" id="demo"></div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    apiready = function(){

    }
    var i=1;
    var startX,
        startY,
        moveEndX,
        moveEndY;
    $api.addEvt($api.byId("demo"), 'touchstart', function(event){
        console.log(event);
        startX = event.touches[0].pageX,
        startY = event.touches[0].pageY;
    });
    $api.addEvt($api.byId("demo"), 'touchmove', function(event){
        // console.log(event);

        i++;
        console.log(event.touches[0].pageY);
        console.log(moveEndY);
        moveEndX = event.touches[0].pageX;
        moveEndY = event.touches[0].pageY;
        X = moveEndX - startX;
        Y = moveEndY - startY;
        // console.log(Y);
        if(Math.abs(Y) > Math.abs(X) && Y > 0){
            var demoH = $api.offset($api.byId("demo")).h;
            var _demoH = demoH+2;
            var bgSize = 100+i;
            $api.css($api.byId("demo"),"height:"+_demoH+"px;background-size:"+bgSize+"%;");
            if(_demoH>260){
                console.log("do something");
            }
        }else if(Math.abs(Y) > Math.abs(X) && Y < 0){
            i = 1;
            $api.css($api.byId("demo"),"height:200px;background-size:100%;");
        }
    });
    $api.addEvt($api.byId("demo"), 'touchend', function(event){
        i = 1;
        $api.css($api.byId("demo"),"height:200px;background-size:100%;");
    });
</script>
</html>